<template>
  <div class="test-analysis">
    <div class="page-header">
      <h2>数据分析API测试</h2>
      <p>测试各个分析模块的API对接</p>
    </div>

    <div class="test-section">
      <el-row :gutter="20">
        <!-- 基础画像分析测试 -->
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>基础画像分析</span>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="testBasicProfile"
                  :loading="basicLoading"
                >
                  测试API
                </el-button>
              </div>
            </template>
            <div v-if="basicData">
              <p><strong>总用户数:</strong> {{ basicData.total_users }}</p>
              <p><strong>平均年龄:</strong> {{ basicData.summary.avg_age }}岁</p>
              <p><strong>平均收入:</strong> ¥{{ basicData.summary.avg_income.toLocaleString() }}</p>
              <div v-if="basicData.age_distribution.length > 0">
                <p><strong>年龄分布:</strong></p>
                <ul>
                  <li v-for="item in basicData.age_distribution.slice(0, 3)" :key="item.label">
                    {{ item.label }}: {{ item.value }}人 ({{ item.percentage }}%)
                  </li>
                </ul>
              </div>
            </div>
            <div v-else-if="!basicLoading">
              <p>点击测试按钮获取数据</p>
            </div>
          </el-card>
        </el-col>

        <!-- 行为画像分析测试 -->
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>行为画像分析</span>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="testBehaviorProfile"
                  :loading="behaviorLoading"
                >
                  测试API
                </el-button>
              </div>
            </template>
            <div v-if="behaviorData">
              <p><strong>平均停留时间:</strong> {{ behaviorData.summary.avg_time_on_site }}分钟</p>
              <p><strong>平均浏览页面:</strong> {{ behaviorData.summary.avg_pages_viewed }}页</p>
              <p><strong>平均登录间隔:</strong> {{ behaviorData.summary.avg_last_login }}天</p>
              <div v-if="behaviorData.activity_distribution.length > 0">
                <p><strong>活跃度分布:</strong></p>
                <ul>
                  <li v-for="item in behaviorData.activity_distribution" :key="item.label">
                    {{ item.label }}: {{ item.value }}人 ({{ item.percentage }}%)
                  </li>
                </ul>
              </div>
            </div>
            <div v-else-if="!behaviorLoading">
              <p>点击测试按钮获取数据</p>
            </div>
          </el-card>
        </el-col>

        <!-- 消费画像分析测试 -->
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>消费画像分析</span>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="testConsumptionProfile"
                  :loading="consumptionLoading"
                >
                  测试API
                </el-button>
              </div>
            </template>
            <div v-if="consumptionData">
              <p><strong>平均消费:</strong> ¥{{ consumptionData.summary.avg_spending.toLocaleString() }}</p>
              <p><strong>平均频率:</strong> {{ consumptionData.summary.avg_frequency }}次/年</p>
              <p><strong>平均订单价值:</strong> ¥{{ consumptionData.summary.avg_order_value.toLocaleString() }}</p>
              <p><strong>总收入:</strong> ¥{{ consumptionData.summary.total_revenue.toLocaleString() }}</p>
              <div v-if="consumptionData.spending_distribution.length > 0">
                <p><strong>消费分布:</strong></p>
                <ul>
                  <li v-for="item in consumptionData.spending_distribution.slice(0, 3)" :key="item.label">
                    {{ item.label }}: {{ item.value }}人 ({{ item.percentage }}%)
                  </li>
                </ul>
              </div>
            </div>
            <div v-else-if="!consumptionLoading">
              <p>点击测试按钮获取数据</p>
            </div>
          </el-card>
        </el-col>

        <!-- 用户分群分析测试 -->
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>用户分群分析</span>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="testSegmentation"
                  :loading="segmentationLoading"
                >
                  测试API
                </el-button>
              </div>
            </template>
            <div v-if="segmentationData">
              <p><strong>分群数量:</strong> {{ segmentationData.summary.total_segments }}</p>
              <p><strong>最大分群:</strong> {{ segmentationData.summary.largest_segment }}</p>
              <p><strong>总用户:</strong> {{ segmentationData.summary.total_users }}</p>
              <p><strong>总收入:</strong> ¥{{ segmentationData.summary.total_revenue.toLocaleString() }}</p>
              <div v-if="segmentationData.segment_distribution.length > 0">
                <p><strong>分群分布:</strong></p>
                <ul>
                  <li v-for="item in segmentationData.segment_distribution.slice(0, 3)" :key="item.label">
                    {{ item.label }}: {{ item.value }}人 ({{ item.percentage }}%)
                  </li>
                </ul>
              </div>
            </div>
            <div v-else-if="!segmentationLoading">
              <p>点击测试按钮获取数据</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 测试所有API -->
    <div class="test-all">
      <el-button 
        type="success" 
        size="large" 
        @click="testAllAPIs"
        :loading="allLoading"
      >
        测试所有API
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  getBasicProfileAnalysis,
  getBehaviorProfileAnalysis,
  getConsumptionProfileAnalysis,
  getUserSegmentationAnalysis
} from '@/api/analysis'

// 加载状态
const basicLoading = ref(false)
const behaviorLoading = ref(false)
const consumptionLoading = ref(false)
const segmentationLoading = ref(false)
const allLoading = ref(false)

// 数据状态
const basicData = ref(null)
const behaviorData = ref(null)
const consumptionData = ref(null)
const segmentationData = ref(null)

// 测试基础画像分析
const testBasicProfile = async () => {
  try {
    basicLoading.value = true
    const response = await getBasicProfileAnalysis()
    
    if (response.success) {
      basicData.value = response.data
      ElMessage.success('基础画像分析API测试成功')
    } else {
      ElMessage.error(`基础画像分析API失败: ${response.message}`)
    }
  } catch (error) {
    console.error('基础画像分析API测试失败:', error)
    ElMessage.error('基础画像分析API测试失败')
  } finally {
    basicLoading.value = false
  }
}

// 测试行为画像分析
const testBehaviorProfile = async () => {
  try {
    behaviorLoading.value = true
    const response = await getBehaviorProfileAnalysis()
    
    if (response.success) {
      behaviorData.value = response.data
      ElMessage.success('行为画像分析API测试成功')
    } else {
      ElMessage.error(`行为画像分析API失败: ${response.message}`)
    }
  } catch (error) {
    console.error('行为画像分析API测试失败:', error)
    ElMessage.error('行为画像分析API测试失败')
  } finally {
    behaviorLoading.value = false
  }
}

// 测试消费画像分析
const testConsumptionProfile = async () => {
  try {
    consumptionLoading.value = true
    const response = await getConsumptionProfileAnalysis()
    
    if (response.success) {
      consumptionData.value = response.data
      ElMessage.success('消费画像分析API测试成功')
    } else {
      ElMessage.error(`消费画像分析API失败: ${response.message}`)
    }
  } catch (error) {
    console.error('消费画像分析API测试失败:', error)
    ElMessage.error('消费画像分析API测试失败')
  } finally {
    consumptionLoading.value = false
  }
}

// 测试用户分群分析
const testSegmentation = async () => {
  try {
    segmentationLoading.value = true
    const response = await getUserSegmentationAnalysis()
    
    if (response.success) {
      segmentationData.value = response.data
      ElMessage.success('用户分群分析API测试成功')
    } else {
      ElMessage.error(`用户分群分析API失败: ${response.message}`)
    }
  } catch (error) {
    console.error('用户分群分析API测试失败:', error)
    ElMessage.error('用户分群分析API测试失败')
  } finally {
    segmentationLoading.value = false
  }
}

// 测试所有API
const testAllAPIs = async () => {
  allLoading.value = true
  
  await Promise.all([
    testBasicProfile(),
    testBehaviorProfile(),
    testConsumptionProfile(),
    testSegmentation()
  ])
  
  allLoading.value = false
  ElMessage.success('所有API测试完成')
}
</script>

<style scoped>
.test-analysis {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #333;
}

.page-header p {
  margin: 0;
  color: #666;
}

.test-section {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-all {
  text-align: center;
}

.el-card {
  height: 400px;
}

.el-card ul {
  margin: 8px 0;
  padding-left: 20px;
}

.el-card li {
  margin-bottom: 4px;
  font-size: 12px;
}
</style>
